/**
 * SSP for APP
 * Copyright 2014 Baidu Inc. All rights reserved.
 *
 * @file 顶部导航条样式
 * @author exodia(dengxinxin@baidu.com)
 */
@sidebar-width: 220px;
@sidebar-child-item-width: 160px;
@sidebar-child-item-height: 36px;
@sidebar-collapse-width: 55px;
@sidebar-menu-item-height: 55px;
@sidebar-top: 60px;
// 侧边栏背景色略
@sidebar-bg: #e8e8e8;
@sidebar-menu-child-bg: #ddd;
@sidebar-menu-item-hover-bg: #f3f5f5;
@sidebar-menu-item-active-bg: #c1c1c1;

esui-sidebar {
    display: block;
}

.ui-sidebar {
    width: @sidebar-width;
    position: relative;
    // position: absolute;
    // top: 0px;
    top: @sidebar-top;
    // bottom: -120px;
    border: none;
    background-color: @sidebar-bg;
    overflow: visible;

    // 被选中的话有点丑
    .user-select(none);

    span, a {
        color: #666;
        text-decoration: none;
        cursor: pointer;
        outline: none;

        &:hover {
            text-decoration: none;
        }
    }

    // 侧边栏图标
    .sidebar-menu-icon {
        width: 16px;
        height: 18px;
        display: inline-block;
    }

    .sidebar-menu,
    .sidebar-child-menu {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .sidebar-menu-item,
    .sidebar-menu-section,
    .sidebar-menu-section-title {
        display: block;
    }

    .sidebar-menu-item {
        position: relative;
    }

    .sidebar-menu-section-title {
        padding: 20px 0 19px 20px;
        height: 16px;
    }

    .sidebar-menu-section-text {
        line-height: 16px;
        padding-left: 16px;
        vertical-align: top;
    }

    // 一级菜单的hover
    .sidebar-menu-item:hover {
        background-color: @sidebar-menu-item-hover-bg;
    }

    // 当前一级菜单背景色
    .sidebar-menu-item-active {
        background-color: @sidebar-menu-item-active-bg;
        &:hover {
            background-color: @sidebar-menu-item-active-bg;
        }

        .sidebar-menu-section-text {
            color: #fff;
            font-weight: bold;
        }
    }

    // 二级菜单默认隐藏
    .sidebar-content-panel {
        display: none;
        overflow: auto;
    }

    // 二级菜单
    .sidebar-child-menu-link {
        height: @sidebar-child-item-height;
        line-height: @sidebar-child-item-height;
        background-color: @sidebar-menu-child-bg;
        display: block;
        padding-left: 55px;

        &:hover {
            background-color: @sidebar-menu-item-hover-bg;
        }
    }

    // active的二级菜单，是不需要变色的
    .sidebar-menu-item-active.sidebar-child-menu-item .sidebar-child-menu-link {
        font-weight: bold;
        &:hover {
            background-color: @sidebar-menu-child-bg;
        }
    }

    .ui-sidebar-drop {
        cursor: pointer;
        height: 53px;
        position: absolute;
        right: 0;
        top: 0;
        width: 37px;
        background: url("../img/sidebar-open.png") no-repeat transparent 15px 24px;
    }

    .sidebar-menu-item-expanded {
        .sidebar-content-panel {
            display: block;
        }
        // 非当前灰色箭头
        .ui-sidebar-drop {
            background: url("../img/sidebar-close.png") no-repeat transparent 15px 24px;
        }
    }

    // 当前白色箭头
    .sidebar-menu-item-active {
        .ui-sidebar-drop {
            background: url("../img/sidebar-active-open.png") no-repeat transparent 15px 24px;
        }

        &.sidebar-menu-item-expanded .ui-sidebar-drop {
            background: url("../img/sidebar-active-close.png") no-repeat transparent 15px 24px;
        }
    }
}

.ui-sidebar-collapsed {
    width: @sidebar-collapse-width;

    .ui-sidebar-drop {
        display: none;
    }

    .sidebar-menu-item-expanded .sidebar-content-panel,
    .sidebar-content-panel {
        display: none;
    }

    // 只显示一个图标
    .sidebar-menu-item {
        width: @sidebar-collapse-width;
        height: @sidebar-menu-item-height;
        overflow: visible; // 让2级菜单出现
        font-size: 0;
        cursor: pointer;
    }

    // 当前group上的白色三角
    .sidebar-menu-item-active:after {
        border-color: transparent #fff transparent;
        border-style: solid;
        border-width: 5px 5px 5px 0;
        content: "";
        height: 0;
        width: 0;
        margin-top: -5px;
        position: absolute;
        right: 0;
        top: 50%;
    }

    .sidebar-menu-item-has-child:hover {
        font-size: 12px;

        .sidebar-menu-section-title {
            width: @sidebar-width;
            background-color: @sidebar-menu-item-hover-bg;
            position: absolute;
        }

        .sidebar-menu-section-text {
            padding-left: 32px;
        }

        // 鼠标hover时在旁边显示出来
        .sidebar-content-panel {
            display: block;
            position: absolute;
            top: @sidebar-menu-item-height;
            left: @sidebar-collapse-width;
        }
    }

    // 当前一级菜单hover不变色
    .sidebar-menu-item-has-child.sidebar-menu-item-active {
        .sidebar-menu-section-title {
            background-color: @sidebar-menu-item-active-bg;
        }

        // hover时，能展开的，隐藏白色三角
        &:hover:after {
            display: none;
        }
    }

    // 二级菜单
    .sidebar-child-menu-item {
        display: block;
        width: @sidebar-child-item-width;
        height: @sidebar-child-item-height;
        line-height: @sidebar-child-item-height;
        text-align: left;
        background-color: @sidebar-menu-child-bg;
    }

    .sidebar-child-menu-link {
        padding-left: 15px;
    }
}

.ui-sidebar {
    overflow: visible;
    .sidebar-menu-item-collapsed:hover {
        font-size: 12px;
        min-height: @sidebar-menu-item-height;
        .sidebar-menu-section-title {
            width: @sidebar-width;
            background-color: @sidebar-menu-item-hover-bg;
            position: absolute;
        }

        .sidebar-menu-section-text {
            padding-left: 32px;
        }

        // 鼠标hover时在旁边显示出来
        .sidebar-content-panel {
            display: block;
            position: absolute;
            top: 0;
            left: @sidebar-width;
            width: @sidebar-child-item-width;
        }
    }
}

.ui-small,.page-container {
    min-height: 100%;
}

.clear {
    clear: both;
}

.navigation {
    height: 0px;
}